<template>
  <el-dialog :model-value="dialogVisible" :z-index="1000" width="450px" title="请选择部门" :before-close="handleClose" draggable>
    <div class="tree">
      <ZTree :id="treeId" :zNodes="zNodes" @click-dom="zTreeOnClick" />
    </div>
    <template #footer>
      <el-button type="primary" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="TreeDialog">
/* eslint-disable */
// @ts-nocheck

import { ref, onMounted, watch, nextTick } from "vue";
import { ElMessage } from "element-plus";
import ZTree from "@/components/ZTree/index.vue";

const treeId = ref("tree");
const dptName = ref("");
const orgUnitIDs = ref([]);

const props = defineProps<{
  dialogVisible: boolean;
  zNodes: any[];
  handleClose: () => void;
  submitCallback: (name: any, ids: any) => void;
}>();

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode, ids }) {
  dptName.value = treeNode.name;
  orgUnitIDs.value = ids;
}

/**
 * 提交信息
 */
const handleSubmit = async () => {
  props.submitCallback(dptName.value, orgUnitIDs.value);
};
</script>

<style lang="scss" scoped>
.tree {
  height: 80vh;
  overflow-y: auto;
}
</style>
